<template>
<!-- 商品分类页 -->
  <div class="tag" @mousewheel.prevent @touchmove.prevent>
    <!-- 左侧选项卡 -->
    <div class="left">
      <ul>
        <li @click="click(0)" :class="index == 0 ? 'active' : ''">所有产品</li>
        <li @click="click(1)" :class="index == 1 ? 'active' : ''">
          风扇灯系列
        </li>
        <li @click="click(2)" :class="index == 2 ? 'active' : ''">现代简约</li>
        <li @click="click(3)" :class="index == 3 ? 'active' : ''">
          北欧后现代
        </li>
        <li @click="click(4)" :class="index == 4 ? 'active' : ''">轻奢风格</li>
        <li @click="click(5)" :class="index == 5 ? 'active' : ''">
          新中式风格
        </li>
        <li @click="click(6)" :class="index == 6 ? 'active' : ''">欧式风格</li>
        <li @click="click(7)" :class="index == 7 ? 'active' : ''">美式风格</li>
        <li @click="click(8)" :class="index == 8 ? 'active' : ''">
          中式木艺灯
        </li>
        <li @click="click(9)" :class="index == 9 ? 'active' : ''">日式风格</li>
      </ul>
    </div>
    <!-- 右侧商品图 -->
    <div class="right">
      <div v-if="index == 0" class="small">
        <router-link :to="{ path: '/home/type', query: { type: 'xdd' } }">
          <img src="../assets/img/p01.png" alt="" />
          <p>吸顶灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'dd' } }">
          <img src="../assets/img/p02.png" alt="" />
          <p>吊灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'fsd' } }">
          <img src="../assets/img/p03.png" alt="" />
          <p>风扇灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'bd' } }">
          <img src="../assets/img/p04.png" alt="" />
          <p>壁灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'td' } }">
          <img src="../assets/img/p05.png" alt="" />
          <p>台灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'ldd' } }">
          <img src="../assets/img/p06.png" alt="" />
          <p>落地灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'pbd' } }">
          <img src="../assets/img/p07.png" alt="" />
          <p>平板灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'jqd' } }">
          <img src="../assets/img/p08.png" alt="" />
          <p>镜前灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'td' } }">
          <img src="../assets/img/p09.png" alt="" />
          <p>筒灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'dd' } }">
          <img src="../assets/img/p16.png" alt="" />
          <p>灯带</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'ktd' } }">
          <img src="../assets/img/k01.png" alt="" />
          <p>客厅灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'ctd' } }">
          <img src="../assets/img/k02.png" alt="" />
          <p>餐厅灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'wsd' } }">
          <img src="../assets/img/k03.png" alt="" />
          <p>卧室灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'wtd' } }">
          <img src="../assets/img/k04.png" alt="" />
          <p>儿童灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'sfd' } }">
          <img src="../assets/img/k05.png" alt="" />
          <p>书房灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'gdd' } }">
          <img src="../assets/img/k06.png" alt="" />
          <p>过道灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'ttd' } }">
          <img src="../assets/img/k07.png" alt="" />
          <p>阳台灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'cwd' } }">
          <img src="../assets/img/k08.png" alt="" />
          <p>厨卫灯</p>
        </router-link>
      </div>
      <div v-if="index == 1" class="small">
        <router-link :to="{ path: '/home/type', query: { type: 'xdfsd' } }">
          <img src="../assets/img/fs01.png" alt="" />
          <p>现代风扇灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'lyfsd' } }">
          <img src="../assets/img/fs02.png" alt="" />
          <p>蓝牙风扇灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'zsfsd' } }">
          <img src="../assets/img/fs03.png" alt="" />
          <p>中式实木风扇灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'xzsfsd' } }">
          <img src="../assets/img/fs04.png" alt="" />
          <p>新中式风扇灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'bofsd' } }">
          <img src="../assets/img/fs05.png" alt="" />
          <p>北欧风扇灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'msfsd' } }">
          <img src="../assets/img/fs06.png" alt="" />
          <p>美式风扇灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'etfsd' } }">
          <img src="../assets/img/fs07.png" alt="" />
          <p>儿童风扇灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'osfsd' } }">
          <img src="../assets/img/fs08.png" alt="" />
          <p>欧式风扇灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'qsfsd' } }">
          <img src="../assets/img/fs09.png" alt="" />
          <p>轻奢风扇灯</p>
        </router-link>
      </div>
      <div v-if="index == 2" class="small">
        <router-link :to="{ path: '/home/type', query: { type: 'xdtc' } }">
          <img src="../assets/img/xd01.png" alt="" />
          <p>现代套装</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'xdxdd' } }">
          <img src="../assets/img/xd02.png" alt="" />
          <p>现代吸顶灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'xddd' } }">
          <img src="../assets/img/xd03.png" alt="" />
          <p>现代吊灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'xdktd' } }">
          <img src="../assets/img/xd04.png" alt="" />
          <p>现代客厅灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'xdctd' } }">
          <img src="../assets/img/xd05.png" alt="" />
          <p>现代餐厅灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'xdwsd' } }">
          <img src="../assets/img/xd06.png" alt="" />
          <p>现代卧室灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'xdbd' } }">
          <img src="../assets/img/xd07.png" alt="" />
          <p>现代壁灯</p>
        </router-link>
        <router-link :to="{ path: '/home/type', query: { type: 'xdtd' } }">
          <img src="../assets/img/xd08.png" alt="" />
          <p>现代台灯</p>
        </router-link>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.tag {
  display: flex;
  position: fixed;
  width: 100%;
  margin-top: 50px;
  height: 80%;
  .left {
    width: 25%;
    li {
      background-color: rgb(247, 247, 247);
      padding: 21px 0;
      padding-left: 10px;
      font-size: 14px;
    }
    .active {
      background-color: white;
      color: red;
      border-left: 5px solid red;
    }
  }
  .right {
    width: 75%;
    .small {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      a {
        width: 28%;
        margin: 2%;
        display: block;
        text-align: center;
        img {
          width: 60px;
          height: 60px;
          align-items: center;
        }
        p {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
<script scoped>
export default {
  name: "tag",
  data() {
    return {
      index: 0,
      isfalse: false,
    };
  },
  methods: {
    click(i) {
      this.index = i;
    },
  },
};
</script>